import { Col, Layout, Row } from "antd";
import Nav from "./components/nav";
import { navs } from "./assets/js/nav.config";
import logo from "./assets/img/logo.png";
import IndexRouter from "./router/index";

function App() {
    return (
        <Layout className="page">
            <Layout.Header className="page-header">
                <Row className="headers">
                    <Col span={4}>
                        <img src={logo} alt="logo" />
                    </Col>
                    <Col span={20}>
                        <Nav
                            data={navs}
                            isdark={true}
                            getSelectKey={({ pathname }) => {
                                return navs.findIndex((item) => {
                                    if (item.isActive) {
                                        return item.isActive(pathname);
                                    } else {
                                        return item.path === pathname;
                                    }
                                });
                            }}
                        />
                    </Col>
                </Row>
            </Layout.Header>
            <Layout.Content className="page-content">
                <IndexRouter />
            </Layout.Content>
            <Layout.Footer>footer</Layout.Footer>
        </Layout>
    );
}

export default App;
